
@import "compass/css3";
@import "animation.scss";

.box{
  width: 1170px;
  height: 100%;
  margin: 0 auto;
  padding: 1px;
}

a{
  &:hover{
    text-decoration: none;
  }
}

.header{
  position: fixed;
  top: 0;
  z-index: 999999;
  background-color: white;
  width: 100%;
  height: 80px;
  @include opacity(0.8);


  a{
    color: black;
    &:hover{
      text-decoration: none;
      color: red;
    }
  }

  .head_logo_div{
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    margin: 15px 290px 0 250px;
    img{
      height: 50px;
    }
  }

  li{
    float: left;
    margin-right: 30px;
    display: block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 20px;

  }
}

.down-icon{
  width: 400px;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;

  h2{
    font-family: xiaohai;
    color: white;
    font-size: 100px;
    cursor: pointer;
  }

}

#xiaohai{
  .section1{
    background: url("../../images/upload/pic_1.jpg") no-repeat;

    .cycle_item{
      height: 400px;
      width: 400px;
      margin: 20px auto;
      position: relative;

    }
    img{
      position: absolute;
    }


    .cycle-tip{
      width: 400px;
      height: 400px;
      position: absolute;
      .cycle-label{
        span{
          height: 50px;
          width: 120px;
          display: block;
          border-radius: 30px;
          border: 0;
          text-align: center;
          line-height: 38px;
          font-size: 20px;
        }
        position: absolute;
        top: 10px;
        left: 20px;

      }
    }
    .cycle-tip:nth-of-type(1){
      @include animation(cycle-tip 1s linear);
      @include animation-fill-mode(forwards);
      .cycle-label{
        @include animation(cycle-label 1s linear);
        @include animation-fill-mode(forwards);
      }
    }

    .cycle-tip:nth-of-type(2){
      @include animation(cycle-tip2 2s linear);
      @include animation-fill-mode(forwards);
      .cycle-label{
        @include animation(cycle-label2 2s linear);
        @include animation-fill-mode(forwards);
      }
    }


    .cycle-rotate{
      @include animation(xiaohai-rotate 2s);
      @include animation-iteration-count(infinite);
      @include animation-timing-function(linear);
    }
    .cycle-rotate2{
      @include animation(xiaohai-rotate2 2s);
      @include animation-iteration-count(infinite);
      @include animation-timing-function(linear);
    }
    .green_cycle{
      width: 260px;
      height: 330px;
      padding-top: 70px;
      margin: 0 auto;

      .green_cycle_img{
        @extend .cycle-rotate;
      }
    }
    .yellow_cycle{
      width: 240px;
      height: 240px;
      margin:10px auto;
      padding-top: 1px;
      .yellow_cycle_img{
        @extend .cycle-rotate2;
      }
    }
    .blue_cycle{
      width: 220px;
      height: 220px;
      margin:10px auto;
      padding-top: 1px;
      .blue_cycle_img{
        @extend .cycle-rotate;
      }
    }
    .head_img_div{
      width: 200px;
      height: 200px;
      margin: 10px auto;
      overflow: hidden;

      img{
        border: 4px solid pink;
        width: 200px;
        border-radius: 50%;
        //@include box-shadow(0 0 10px 5px white);
        @include animation(xiaohai-boxshow 2s);
        @include animation-iteration-count(infinite);
        @include animation-timing-function(linear);
      }
    }

    .section1-content{
      height: 300px;
      width: 600px;
      margin: 0 auto;
      color: white;
      text-align: center;

      #box01_text{
        margin-top: 30px;
        @include transition(1s all);
      }
      .box01_p{
        font-size: 20px;
        cursor: pointer;
        @include transition(all 0.2s);
        @include opacity(0);
        &:hover{
          font-size: 25px;
        }
      }
    }




  }

  // section1 完结*********************************************

  .section2{
    background: url("../../images/upload/pic_2.jpg") no-repeat;


    .box2{
      width: 1566px;
      height: 555px;
      //background-color: red;
      margin: 130px auto;

    }

    .down-icon{
      margin-top:-60px;
    }

    .box2-progress{
      height: 555px;
      width: 0px;
      float: left;
      @include opacity(0);


      .box2-bar{

        padding: 20px 50px 0 50px;
      }
      .box2-bar-size{

        height: 40px;
        margin-bottom: 0px;

        span{
          display: block;
          font-size: 18px;
          line-height: 40px;
          float: left;
          @include opacity(0.8);
        }
        p{
          font-size: 18px;
          line-height: 40px;
          text-align: right;
          display: block;
          float: right;
          @include opacity(0.8);
        }
      }
    }

    .box2-content{
      float: right;
      width: 768px;
      height: 515px;
      //background-color: deepskyblue;
      text-align: center;
      color: white;

      .overline{
        border: 1px dashed white;
        width: 600px;
        height: 1px;
        margin: 0 auto;
        margin-bottom: 10px;
        @include opacity(0);
        @include translate(320px,0);
        @include transition(0.5s all);
      }

      p{
        font-size: 15px;
        cursor: pointer;
        @include transition(0.5s all);
        @include opacity(0);
        @include translate(320px,0);
        &:hover{
          font-size: 18px;
        }
      }

      h1{
        @include opacity(0);
        @include translate(320px,0);
        @include transition(0.5s all);
      }

      .text-opacity{
        @include opacity(1);
        @include translate(0,0);
      }
      .text-disopacity{
        @include opacity(0);
      }
    }


  }


  // section2 完结*********************************************
  .section3{
    background: url("../../images/upload/pic_3.jpg") no-repeat;
    .hobbly{
      text-align: center;
      color: white;
    }
    .box3{
      width: 1536px;
      height: 600px;
      margin: 0 auto;
      .box3-top{
        width: 1536px;
        height: 300px;
        border-bottom: 1px dashed black;
      }
      .box3-bottom{
        width: 1536px;
        height: 300px;
      }
      .express{
        margin-top: 4px;
        background-color: rgba(31, 31, 31, 0.86);
        height: 280px;
        @include box-shadow( 10px 10px 3px 1px black);
        color: white;
        text-align: center;
        line-height: 25px;
        @include transition(0.5s all);
        @include opacity(0);

      }
      .eq1{
        @include translateX(-100px);
      }
      .eq3{
        @include translateY(100px);
      }
      .eq2{
        @include translateX(100px);
      }
    }


  }

  // section3 完结*********************************************
  .section4{
    background: url("../../images/upload/pic_4.jpg") no-repeat;
    .hobbly{
      text-align: center;
      color: white;
    }
    .box4{
      width: 1536px;
      height: 600px;
      margin: 0 auto;

      li{

        width: 460px;
        height: 500px;
        margin-right: 50px;
        background-color: rgba(140, 131, 131, 0.6);
        border-radius: 15px;
        float: left;
        .top{
          height: 350px;
          width: 100%;
          padding: 1px;
          .cryimg{
            width: 230px;
            height: 230px;
            margin: 50px auto;
            position: relative;
            border-radius: 50%;
            overflow: hidden;


            @include animation(xiaohai-boxshow 2s);
            @include animation-iteration-count(infinite);
            @include animation-timing-function(linear);
          }
          .text{
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            color: white;
            background-color: black;
            border-radius: 50%;
            @include opacity(0);
            @include transition(1s all);
            cursor: pointer;
            &:hover{
              @include opacity(0.5);
            }
            .solid{
              border-bottom: 1px solid white;
            }
            .pos{
              margin: 90px 0 0 50px;
            }
            h2{
                width: 130px;
                margin: 0;
              font-size: 18px;
            }

          }
          img{
            width: 230px;

          }
          &:hover .cyc-border{
            @include rotate(130deg);
          }
          .cyc-border{
            position: absolute;
            width: 100%;
            height: 100%;
            border: 10px solid #ecab18;
            border-right-color: #1ad280;
            border-bottom-color: #1ad280;
            border-radius: 50%;
            @include transition(1s all);

          }

        }

        .hobby_text_div{
          margin: -30px 0 0 0;
          color: white;
          line-height: 20px;
          font-size: 18px;
          font-weight: 100;
          p{
            text-indent: 2em;
          }
        }
      }
      li:nth-of-type(2){

        background-color: rgba(132, 59, 59, 0.6);
        height: 550px;
        .cryimg{
          &:hover .cyc-border{
            @include rotate(-176deg);
          }
          .cyc-border{
            @include rotate(-90deg);
          }
        }

        .cyc-border{
          border: 10px solid #ff9933;
          border-right-color: #3366cc;
          border-bottom-color: #3366cc;
        }

      }
      li:nth-of-type(3){

        .cryimg{
          &:hover .cyc-border{
            @include rotate(-120deg);
          }
          .cyc-border{
            @include rotate(10deg);
          }
        }
        background-color: rgba(114, 53, 134, 0.6);
        .cyc-border{
          border: 10px solid #339933;
          border-right-color: #cc9900;
          border-bottom-color: #cc9900;
        }
      }
    }
  }

  // section4 完结*********************************************
  .section5{
    background: url("../../images/upload/pic_1.jpg") no-repeat;
  }
}